<script setup lang='ts'>
import { getCodeApi, loginRegisterApi } from "../../api/index.ts";
import { computed, ref } from 'vue';
import { useUserStore } from "@/stores/user.ts";
import { setToken } from "@/utils/local.js";
import { useRouter } from 'vue-router'
import { ElMessage } from "element-plus";
const user = useUserStore();
const router = useRouter()
// 登录数据
const loginData = ref({
  phone: '',
  veriCode: ''
})
const curttime = ref(60);

const count = ref(curttime.value)

// 获取验证码禁用状态
const isDisabledCode = computed(() => {
  const regIphone = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
  // 是不是手机号
  const isIphone = regIphone.test(loginData.value.phone);
  // 是不是正在倒计时
  const isCurtDown = count.value === curttime.value;
  //      是手机号        不是在倒计时
  return (isIphone && isCurtDown) ? false : true
})
// 登录
const handleLogin = () => {
  user.userLogin(loginData.value)
    .then((resp) => {
      setToken('token', resp.data.token);
      setToken('refreshToken', resp.data.refreshToken);
      router.push({ name: 'Home' })
    })
    .catch(() => { })
}
// 获取验证码
const getCode = () => {
  handleCurtDown();
  getCodeApi().then(resp => {
    console.log(resp.data)
    loginData.value.veriCode = resp.data.data
  })
}
// 倒计时
const handleCurtDown = () => {
  count.value--;
  const timer = setInterval(() => {
    count.value--;
    if (count.value === 0) {
      clearInterval(timer);
      count.value = curttime.value;
    }
  }, 1000)
}

const configs1 = {
  particles: {
    number: {
      value: 100
    },
    color: {
      value: "#ffffff"
    },
    links: {
      enable: true,
      distance: 200
    },
    shape: {
      type: "circle"
    },
    opacity: {
      value: 1
    },
    size: {
      value: {
        min: 4,
        max: 6
      }
    },
    move: {
      enable: true,
      speed: 2
    }
  },
  background: {
    color: "#000000"
  },
  poisson: {
    enable: true
  }
};
const configs = {
  name: "Fireworks Mask",
  fullScreen: {
    enable: true
  },
  background: {
    color: "#000000",
    image: "url('https://particles.js.org/images/background3.jpg')",
    position: "50% 50%",
    repeat: "no-repeat",
    size: "cover"
  },
  backgroundMask: {
    enable: true,
    cover: {
      color: "#000"
    }
  },
  emitters: {
    direction: "top",
    life: {
      count: 0,
      duration: 0.1,
      delay: 0.1
    },
    rate: {
      delay: 0.15,
      quantity: 1
    },
    size: {
      width: 100,
      height: 0
    },
    position: {
      y: 100,
      x: 50
    }
  },
  particles: {
    color: {
      value: "#fff"
    },
    number: {
      value: 0
    },
    destroy: {
      bounds: {
        top: 30
      },
      mode: "split",
      split: {
        count: 1,
        factor: {
          value: 0.333333
        },
        rate: {
          value: 100
        },
        particles: {
          stroke: {
            width: 0
          },
          color: {
            value: ["#ff595e", "#ffca3a", "#8ac926", "#1982c4", "#6a4c93"]
          },
          number: {
            value: 0
          },
          collisions: {
            enable: false
          },
          destroy: {
            bounds: {
              top: 0
            }
          },
          opacity: {
            value: {
              min: 0.1,
              max: 1
            },
            animation: {
              enable: true,
              speed: 0.7,
              sync: false,
              startValue: "max",
              destroy: "min"
            }
          },
          effect: {
            type: "trail",
            options: {
              trail: {
                length: {
                  min: 5,
                  max: 10
                }
              }
            }
          },
          shape: {
            type: "circle"
          },
          size: {
            value: 2,
            animation: {
              enable: false
            }
          },
          life: {
            count: 1,
            duration: {
              value: {
                min: 1,
                max: 2
              }
            }
          },
          move: {
            enable: true,
            gravity: {
              enable: true,
              acceleration: 9.81,
              inverse: false
            },
            decay: 0.1,
            speed: {
              min: 10,
              max: 25
            },
            direction: "outside",
            outModes: "destroy"
          }
        }
      }
    },
    life: {
      count: 1
    },
    effect: {
      type: "trail",
      options: {
        trail: {
          length: {
            min: 10,
            max: 30
          },
          minWidth: 1,
          maxWidth: 1
        }
      }
    },
    rotate: {
      path: true
    },
    shape: {
      type: "circle"
    },
    size: {
      value: 1
    },
    move: {
      enable: true,
      gravity: {
        acceleration: 15,
        enable: true,
        inverse: true,
        maxSpeed: 100
      },
      speed: {
        min: 10,
        max: 20
      },
      outModes: {
        default: "destroy",
        top: "none"
      }
    }
  },
  sounds: {
    enable: true,
    events: [
      {
        event: "particleRemoved",
        filter: (args) => args.data.particle.options.move.gravity.inverse,
        audio: [
          "https://particles.js.org/audio/explosion0.mp3",
          "https://particles.js.org/audio/explosion1.mp3",
          "https://particles.js.org/audio/explosion2.mp3"
        ]
      }
    ],
    volume: 50
  }
};

const btnClick = () => {
  ElMessage.success('1231')
}




router.push({
  path: 'da123123123123131',
  query: {
    name: '章三',
    age: '里斯'
  }
})



router.push({
  name: '',
  params: {},
  query: {}
})



</script>

<template>
  <div>
    <vue-particles id="tsparticles" :options="configs1" />
    <div class="login">
      <el-form :model="loginData">
        <el-form-item>
          <el-input v-model="loginData.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginData.veriCode" placeholder="请输入验证码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLogin">登录</el-button>
          <el-button :disabled="isDisabledCode" @click="getCode">{{ count === curttime ? '获取验证码' : "还剩" + count
      +
            'S之后重新获取' }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login {
  width: 500px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>